<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工管理</title>
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/themes/default/easyui.css"/>">
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/themes/icon.css"/>">

<script type="text/javascript" src="<c:url value="/js/jquery.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/js/jquery.easyui.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/js/easyui-lang-zh_CN.js"/>"></script>
</head>
<body>
	<style>
* {
	font-size: 12px;
}

.item {
	margin-top: 3px;
}
</style>

	<script type="text/javascript">
		$(function() {
			//打开窗口
			$("#emp-add").linkbutton({
				onClick : function() {
					$('#win-emp').window({
						'title' : "录入信息"
					});
					$("#win-emp").window("open");
				}

			});

			//提交添加
			$("#btn-ok").linkbutton({
				onClick : function() {
					var title = $('#win-emp').window("options").title;
					var url = (title == '录入信息' ? 'addEmp' : 'editEmp');
					$('#form-empadd').form('submit', {
						url : url,
						onSubmit : function() {
							//验证
							return $(this).form("validate");
						},
						success : function(data) {
							var json = eval("(" + data + ")");
							$.messager.alert("提示", json.reason);
							//关闭窗口
							$('#win-emp').window('close');
							$()
							//重新加载数据
							$("#tb-employee").datagrid("reload");
						}
					});
				}
			});

			//打开编辑信息窗口
			$("#emp-edit").linkbutton(
					{
						onClick : function() {
							var rows = $("#tb-employee").datagrid(
									"getSelections");
							if (rows.length == 1) {
								$('#win-emp').window({
									'title' : "编辑信息"
								});
								$('#win-emp').window("open");
								//初始化表单
								var ygNo = rows[0].ygNo;
								$.getJSON("findEmpById", {
									"ygNo" : ygNo
								}, function(data) {
									$("#form-empadd").form("load", data);
									$("#ks").combogrid({
										value : data.hisdepartment.ksNo
									});
									$("#bm").combogrid({
										value : data.hisdept.bmNo
									});
								});
							} else {
								$.messager.alert("提示", "只能选择一条记录，您目前选择了"
										+ rows.length + "条!");
							}
						}
					});

			//批量删除
			$("#emp-del").linkbutton(
					{
						onClick : function() {
							$.messager.confirm("提示", "确定要删除吗？", function(v) {
								if (v) {
									//获取所有选中的编号
									var rows = $("#tb-employee").datagrid(
											"getSelections");
									//将编号保存到数组中
									var arr = [];
									for (var i = 0; i < rows.length; i++) {
										arr.push(rows[i].ygNo);
									}
									//用form提交
									$('<form>').form(
											'submit',
											{
												url : 'delEmpBatch',
												onSubmit : function(param) {
													param.list = arr;
												},
												success : function(data) {
													var json = eval("(" + data
															+ ")");
													$.messager.alert("提示",
															json.reason);
													$("#tb-employee").datagrid(
															"reload");
												}
											});
								}
							});
						}
					});

			//搜索员工
			$('#emp-search').searchbox({
				searcher : function(value, name) {
					$("#tb-employee").datagrid({
						url : 'queryEmpByName',
						method : 'post',
						queryParams : {
							ygName : value
						}
					});
				}
			});

			//验证
			$("input[type=text]").validatebox();

			$.extend($.fn.validatebox.defaults.rules, {
				// 验证手机号码
				tel : {
					validator : function(value) {
						return /^(13|15|18)\d{9}$/i.test(value);
					},
					message : '手机号码（11位）'
				},

				/* 		// 验证密码
				 psd : {
				 validator : function(value) {
				 return /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$/
				 .test(value);
				 },
				 message : '密码由英文字母、数字组成'
				 }, */

				//验证身份证
				idcard : {
					validator : function(value) {
						return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
					},
					message : '15位或18位证件号'
				}

			});

			//通过onChange动态联动设置名字和身份证
			$("#card").textbox(
					{
						onChange : function(idcard, o) {
							$.getJSON('getIdcard', {
								'idcard' : idcard
							}, function(data) {
								//出生年月、性别、籍贯
								$("#Birth").textbox('setValue', data.ygBirth);
								$("#Sex").textbox('setValue', data.ygSex);
								$("#NativePlace").textbox('setValue',
										data.ygNativePlace);
							});
						}
					})

			//根据入职时间改变行内样式
			$('#tb-employee').datagrid({
				rowStyler : function(index, row) {
					var endtime = new Date();
					var year = endtime.getYear() + 1900;
					var mouth = endtime.getMonth() + 1;
					if (mouth < 10) {
						mouth = "0" + mouth;
					}
					var day = endtime.getDate();
					if (day < 10) {
						day = "0" + day;
					}
					var data = year + "-" + mouth + "-" + day;
					if (row.ygEntryDate == data) {
						return 'color:deeppink;';
					}
					//根据在职状态改变行样式
					if (row.ygServiceState == "离职") {
						return 'background-color:lime;';
					}
				}
			});

			//取消按钮
			$("#btn-cancel").linkbutton({
				onClick : function() {
					$('#win-dept').window('close');
				}
			});

		});
	</script>
	<table id="tb-employee" class="easyui-datagrid"
		data-options="url:'queryEmpByPage',
           fitColumns:true,
           fit:true,
           pagination:true,
           pageSize:15,
           pageList:[15,25,35,45],
           rownumbers:true,
           toolbar:'#emp',
           border:false  
           ">
		<thead>
			<tr>
				<th data-options="field:'ygNo',width:'8%', checkbox: true">编号</th>
				<th data-options="field:'ygName',width:'6%'">姓名</th>
				<th data-options="field:'ygSex',width:'4%'">性别</th>
				<th data-options="field:'ygNation',width:'4%'">民族</th>
				<th data-options="field:'ygNativePlace',width:'8%'">籍贯</th>
				<th data-options="field:'ygBirth',width:'10%'">出生年月</th>
				<th data-options="field:'ygIdCard',width:'15%'">身份证号</th>
				<th data-options="field:'ygPost',width:'6%'">职务</th>
				<th data-options="field:'ygAddress',width:'8%'">住址</th>
				<th data-options="field:'ygTel',width:'10%'">联系方式</th>
				<th data-options="field:'ygServiceState',width:'5%'">在职状态</th>
				<th data-options="field:'ygEntryDate',width:'10%'">入职时间</th>
			</tr>
		</thead>
		<tbody>
	</table>

	<div id="emp">
		<a id="emp-add" class="easyui-linkbutton"
			data-options="iconCls:'icon-add',plain:true">添加</a> <a id="emp-edit"
			class="easyui-linkbutton"
			data-options="iconCls:'icon-edit',plain:true">编辑</a> <a id="emp-del"
			class="easyui-linkbutton"
			data-options="iconCls:'icon-cancel',plain:true">批量删除</a> 
			<input  id="emp-so" class="easyui-searchbox" data-options="prompt:'请输入',menu:'#mm',searcher:doSearch" style="width:200px"></input>

		<div id="mm">
		<div data-options="name:'names'">姓名</div>
		<div data-options="name:'posst'">职务</div>
	</div>
	</div>
	
		<script>
		var url ;
		$(function(){
			doSearch();
			$("#mm").menu({
				onClick:function(itme){
					url =	(itme.name == 'names' ? 'queryEmpByName' : 'queryEmpByPost');	
					
				}
			});
		})
		function doSearch(value,name){
			$('#emp-so').searchbox({
			    searcher:function(value,name){
			    	$("#tb-employee").datagrid({
			    		url:url, 
			    		method: 'post', 
			    		queryParams: {
			    			ss: value
			    		}});
			    }
			});
			
		}
	</script>
	<!-- 添加窗口 -->
	<div id="win-emp" class="easyui-window" title="录入信息"
		data-options="collapsible:false,minimizable:false,maximizable:false,modal:true,iconCls:'icon-save',closed: true"
		style="width: 340px; height: 520px; padding: 3px;">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center'" style="padding: 10px;">
				<form id="form-empadd" method="post">
					<div class="item">
						<input name="ygNo" class="easyui-textbox" value="${autoId}"
							data-options="label: '员工编号', width: 220">
					</div>
					<div class="item">
						<input name="ygName" class="easyui-textbox"
							data-options="label: '姓名',required:true, width: 220">
					</div>
					<div class="item">
						<input name="ygIdCard" id="card" class="easyui-textbox"
							validtype="idcard" data-options="label: '身份证号', width: 220">
					</div>
					<div class="item">
						<input name="ygSex" id="Sex" class="easyui-textbox"
							data-options="label: '性别', width: 220">
					</div>
					<div class="item">
						<select name="ygNation" class="easyui-combobox"
							data-options="label: '民族', panelHeight: 'auto'"
							style="width: 220px;">
							<option value="汉族">汉族</option>
							<option value="苗族">苗族</option>
							<option value="藏族">藏族</option>
							<option value="回族">回族</option>
							<option value="侗族">侗族</option>
							<option value="土家族">土家族</option>
						</select>
					</div>
					<div class="item">
						<input name="ygNativePlace" id="NativePlace"
							class="easyui-textbox" data-options="label: '籍贯', width: 220">
					</div>
					<div class="item">
						<input name="ygBirth" id="Birth" class="easyui-textbox"
							data-options="label:'出生年月', width:220">
					</div>
					<div class="item">
						<select name="ygPost" class="easyui-combobox"
							data-options="label: '职务', panelHeight: 'auto'"
							style="width: 220px;">
							<option value="医生">医生</option>
							<option value="护士">护士</option>
							<option value="普工">普工</option>
						</select>
					</div>
					<div class="item">
						<select name="ksNo" id="ks" class="easyui-combogrid"
							name="hisdepartment" style="width: 220px;"
							data-options="
					  label: '科室',
					  panelWidth:100,
					  panelHeight: 'auto',
					  idField:'ksNo',
					  textField:'ksName',
					  url:'queryAllDepart',
					  columns:[[
					   {field:'ksName',title:'科室名称',width:96},
						    ]]
				"></select>
					</div>
					<div class="item">
						<select name="bmNo" id="bm" class="easyui-combogrid"
							name="hisdept" style="width: 220px;"
							data-options="
					  label: '部门',
					  panelWidth:100,
					  panelHeight: 'auto',
					  idField:'bmNo',
					  textField:'bmName',
					  url:'queryAllDept',
					  columns:[[
					   {field:'bmName',title:'部门名称',width:96},
						    ]]
				"></select>
					</div>
					<div class="item">
						<input name="ygPsd" id="psd" class="easyui-textbox"
							readonly="readonly" value="168168"
							data-options="label: '初始密码',width: 220">
					</div>
					<div class="item">
						<input name="ygAddress" class="easyui-textbox"
							data-options="label: '住址', width: 220">
					</div>
					<div class="item">
						<input name="ygTel" class="easyui-textbox" validtype="tel"
							, data-options="label: '联系方式',width: 220">
					</div>
					<div class="item">
						<select name="ygServiceState" class="easyui-combobox"
							data-options="label: '在职状态', panelHeight: 'auto'"
							style="width: 220px;">
							<option value="在职">在职</option>
							<option value="离职">离职</option>
						</select>
					</div>
					<div class="item">
						<input name="ygEntryDate" class="easyui-datebox"
							data-options="label:'入职时间', width:'72%'">
					</div>
				</form>
			</div>
			<div data-options="region:'south',border:false"
				style="text-align: right; padding: 5px 0 0;">
				<a id="btn-ok" class="easyui-linkbutton"
					data-options="iconCls:'icon-ok', plain:true">确定</a> <a
					id="btn-cancel" class="easyui-linkbutton"
					data-options="iconCls:'icon-cancel', plain:true"
					href="javascript:$('#win-emp').window('close');" onclick="">取消</a>
			</div>
		</div>
	</div>



</body>
</html>